<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>风行天下</title>
    <style type="text/css">
    *{margin: 0;padding: 0;}
    hr{    height: 4px;
    width: 96%;
    margin-top: 10px;
    margin-left: 2%;}
    img{width: 100%;
        height: 60px;}
    ul{list-style: none;}
    .h_two_li{float: left;
    margin-top: 2%;
    margin-left: 3px;
    height: 39px;
    width: 78px;
    background-color: beige;
    text-align: center;}
    li.h_two_li:hover{border-bottom: 2px solid red;
    }li.h_two_li>a:hover{color: red;}
    a{text-decoration: none;
        line-height: 38px;}
    a.login:hover{color: yellowgreen;}
    .big{}
        .header{position: relative;
    height: 62px;
    border: 1px solid;    
    border: 1px solid darkgray;
    background-color: honeydew;}
            .h_one{float: left;
    height: 60px;
    width: 18%;
    text-align: center;}
            .h_two{position: relative;
    height: 60px;
    width: 60%;
    float: left;}
            .h_thr{    float: right;
    height: 60px;
    width: 18%;
    line-height: 4;
    /*background-color: gainsboro;*/
    text-align: center;}

        .tpic{position: absolute;
    width: 100%;
    height: 400px;
    background-color: azure;
    margin-top: -17px;}
            #num{
            position: absolute;
            left: 45%;
            bottom: 10px;
            }
            #num>li{
            height: 20px;
            width: 20px;
            background-color: #333;
            border-radius:50%;
            text-align:center;
            line-height:20px;
            margin:2px;
            float:left;
            color:#fff;
        }
            #pic>li{display: none;}
            #pic>li>img{height: 400px;}
            .arrow{
            width: 30px;
            height:40px;
            background:rgba(0,0,0,0.5);
            display: block;
            position: absolute;
            top:45%;
            text-align: center;
            line-height: 40px;
            color: #fff;
            text-decoration: none;
            font-size: 18px;
            }
            #con>.arrow{
            display: none;
            }
            #con:hover>.arrow{
            display: block;
            }

            #right:hover{
            background: red;
            }
            #right{
            right: 2%;}
            #left:hover{
            background: red; }
            #left{
            left: 2%;}
            .act{background: red!important;}



        .sos{position: relative;
    width: 70%;
    margin-left: 15%;
    height: 200px;
    margin-top: 10px;} .sos>div{float: left;}
            .s_one{    width: 50%;
    /*border: 1px solid yellowgreen;*/
    margin-left: 26%;
    height: 52px;
    background-color: red;}#s_text{    width: 85%;
                height: 40px;
                margin: 3px;}#s_mit{     width: 11%;
                                            height: 43px;
                                            background-color: red;
                                            /* opacity: 0; */
                                            /* padding: 0px; */
                                            border: 0px;
                                            font-size: 20px;
                                            text-align: center;
                                            color: white;}
            .s_two{position: absolute;
                left: 26%;
                top: 28%;}dt{float: left;
             line-height: 3;}dd{float: right;
              /* position: absolute; */
             line-height: 3;
             margin-left: 36px;}



        .show{    height: 464px;
    width: 98%;
    margin-left: 1%;
    margin-top: 15%;
    background-color: darkcyan;
    overflow: hidden;
    position: absolute;
    }
            .sh_con{position: relative;
                display: flex;
                flex-flow: wrap;
                margin-top: 10px;
                margin-left: 55px;}
                .show_pic{float: left;
                    margin-left: 12px;
                    width:30%;}
                    .p_img>img{height: 145px;}
                    .p_text{}

 div.loding {
    position: absolute;
    margin-top: 52%;
    background-color: azure;
    right: 12px;
}
        .floot{    width: 100%;
    height: 120px;
    background-color: dimgray;
    margin-top: 54%;}

           
    </style>
</head>
<body>
<div class="big">
    <div class="header">
        <div class="h_one"><a href=""><img src="../images/logo4.jfif"></a></div>
        <div class="h_two">
            <ul class="h_two_ul">
                <li class="h_two_li"><a href="/">首页</a></li>
                <li class="h_two_li"><a href="">海景</a></li>
                <li class="h_two_li"><a href="">古镇</a></li>
                <li class="h_two_li"><a href="">高山</a></li>
                <li class="h_two_li"><a href="">绿水</a></li>
            </ul></div>
        <div class="h_thr"><a class="login" href="/lo">登录</a> | <a class="login" href="/re ">注册</a></div>
    </div>
<hr>
    <div class="tpic" id="con">
        <ul id="pic">
            <li style="display: block;"><img src="../images/pic001.jpg" alt="美景"></li>
            <li><img src="../images/pic002.jpg" alt="美景"></li>
            <li><img src="../images/pic003.jpg" alt="美景"></li>
            <li><img src="../images/pic004.jpg" alt="美景"></li>
            <li><img src="../images/pic005.jpg" alt="美景"></li>
        </ul>
        <ul id="num">
            <li class="act">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
        <a href="javascript:void()" class="arrow" id="left"><</a>
        <a href="javascript:void()" class="arrow" id="right">></a>
    </div>
<hr>
    <div class="sos">
        <div class="s_one">
            <form action="/po" method="post">
            <input type="text" name="name" placeholder="Want To Go" id="s_text">
            <input type="submit" value="Go" id="s_mit">
            </form>
        </div>
        <div class="s_two">
            <dl><dt>热门景点:</dt><dd><a href="" class="s_a">美景</a></dd><dd><a href="" class="s_a">美景</a></dd><dd><a href="" class="s_a">美景</a></dd><dd><a href="" class="s_a">美景</a></dd><dd><a href="" class="s_a">美景</a></dd></dl>
        </div>
    </div>
<hr>
    <div class="show">
        <div class="sh_con">
            <%data.forEach(item=>{ %>
                    <div class="show_pic">
                        <div class="p_img">
                            <img src="../images/<%=item.cityim%>.jpg">
                        </div>
                        <div class="p_text">
                            <ul>
                                <li><%=item.cityna%></li>
                                <li><%=item.cityin%></li>
                                <li><div><a href=""><%=item.citypr%></a></div></li>
                            </ul>
                        </div>
                    </div>
            <%})%>
        </div>
    </div>
     <div class="loding">
        <a href="">>>>查看更多内容>>></a>
    </div>
<hr>
    <div class="floot"></div>

</div>


<script type="text/javascript">


    (function (win,con,pic,num,l,r) {
            // body...
            var g={index:0};
            //获取元素
            function id(a){
                return document.getElementById(a);
            }
            var con=id(con),
                pics=id(pic).getElementsByTagName("li"),
                nums=id(num).getElementsByTagName("li"),
                l=id(l),
                r=id(r);

            function next(glo){
                glo.index++;
                glo.index%=5;
                Array.from(pics).forEach((itme,index)=>{
                    itme.style.display=glo.index==index?"block":"none";
                    nums[index].className=glo.index==index?"act":"";
            });}

            g.timmer=setInterval(next,4000,g);
            l.onclick=(e)=>{

                g.index+=3;
                next(g);
            }
            r.onclick=e=>next(g);
            con.onmouseover=e=>clearInterval(g.timmer);
            con.onmouseout=e=>g.timmer=setInterval(next,2000,g);

            Array.from(nums).forEach((itme,index)=>{
                itme.onclick=e=>{
                    g.index=index+4;
                    next(g);
                }
            });

        })(window,"con","pic","num","left","right");
</script>
</body>
</html>